<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/group.css">
    <link rel="stylesheet" href="css/show.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/show.js"></script>
</head>
<style>

</style>
<body>
<div id="wrapper">
    <!--顶部导航栏-->
    <header>
        <!--置顶菜单栏-->
        <div class="wrapper">
            <div class="home">
                <div class="box">
                    <div class="detail-main">
                        <div class="main-nav-wrap">
                            <div class="main-nav">
                                <ul class="list ">
                                    <li class="c">
                                        <a href="#and" id="cc">
                                            <p>商品详情</p>
                                            <img class="arrow" src="img/arrow.png" alt="">
                                        </a>
                                    </li>
                                    <li class="d">
                                        <a href="#five" id="aa">买家评价 1045</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="home-center">
                                <a href="#one" class="out-1">尺码材质</a><b>|</b>
                                <a href="#two" class="out-2">穿着效果</a><b>|</b>
                                <a href="#four" class="out-3">细节做工</a><b>|</b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航条 -->
        <div class="header-o">
            <li class="ul-one ull"><a href="#"><span class="house"></span>蘑菇街首页</a></li>
        </div>
        <div class="header-t">
            <ul>
                <li class="ul-1 ull">
                    <a href="register.html" v-if="account==null">注册</a>
                    <a href="#" v-if="account!=null"></a>
                </li>
                <li class="ul-2 ull">
                    <a href="login.html" v-if="account==null">登录</a>
                    <a href="#" v-if="account!=null">{{account}}</a>
                </li>
                <li class="ul-3 ull"><a href="#"><span class="back"></span>我的订单</a></li>
                <li class="ul-4 ull"><a href="cart.html"><span class="back2"></span>购物车</a></li>
                <div class="ul-41">购物车里没有商品</div>
                <li class="ul-5 ull"><a href="#">客户服务<span class="back3"></span></a></li>
                <div class="ul-51">
                    <div class="ul-511 ul-512"><a href="#">消费者服务</a></div>
                    <div class="ul-511 ul-513"><a href="#">商家服务</a></div>
                    <div class="ul-511 ul-514"><a href="#">规则中心</a></div>
                </div>
                <li class="ul-6 ull"><a href="#"><span class="back4"></span>我的小店<span class="back5"></span></a></li>
                <div class="ul-61">
                    <div class="ul-511 ul-611"><a href="#">管理后台</a></div>
                    <div class="ul-511 ul-612"><a href="#">商家社区</a></div>
                    <div class="ul-511 ul-613"><a href="#">商家培训</a></div>
                    <div class="ul-511 ul-614"><a href="#">市场入驻</a></div>
                </div>
            </ul>
        </div>
    </header>
    <!--导航栏-->
    <nav>
        <div class="body">
            <div class="left">
                <p>团购 | <span>每天10点开始</span></p>
            </div>
            <div class="right">
                <p class="right-1"><a href="">首页</a></p>
                <p class="right-2"><a href="">品牌·剁手特卖</a></p>
                <p class="right-3"><a href="">囤货团</a></p>
            </div>
            <div class="center">
                <img src="img/tuihuo.png">
            </div>
        </div>
    </nav>
    <!--主题内容-->
    <div>
        <!--图片展示和选择菜单栏-->
        <div class="main">
            <div class="main-left">
                <a href=""><img :src="commodity.headpic"></a>
            </div>
            <div class="">
                <div id="product_middle">
                    <div class="middle_head">
                        <span>{{commodity.commname}}</span>
                    </div>
                    <div class="middle_price">
                        <div class="price_one">
                            <span>价格：</span>
                            <span style="text-decoration: line-through;">￥{{commodity.price}}</span>
                        </div>
                        <div class="price_one">
                            <span>促销价：</span>
                            <span style="font-size:20px;font-weight: bold;color: #ef2f23;">￥{{commodity.price*0.9}}</span>
                            <span style="margin-left: 100px;">评价：</span>
                            <span style="color: #333">423：</span>
                            <span>销量累计：</span>
                            <span style="color: #333">{{commodity.count}}</span>
                        </div>
                        <div class="price_one">
                            <span>店铺优惠：</span>
                            <div class="coupon">
                                <span style="color: #ff0077;">满99立减5元</span>
                                <div class="coupon_button">
                                    <a href="">
                                        <span>领取</span>
                                    </a>
                                </div>
                            </div>
                            <div class="coupon">
                                <span style="color: #ff0077;">满199立减15元</span>
                                <div class="coupon_button">
                                    <a href="">
                                        <span>领取</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="customer_service">
                        <span>客服：</span>
                        <div class="contact_service">
                            <a href="">
                                <i class="iconfont icon-xinxi">联系客服</i>
                            </a>
                        </div>
                    </div>
                    <div class="customer_service">
                        <span>颜色：</span>
                        <div class="product_color product_size" style="width: 50px;">
                            <ul>
                                <li>
                                    <input type="radio" name="color" v-model="color" value="杏色">杏色
                                </li>
                            </ul>
                        </div>
                        <div class="product_color product_size" style="width: 50px;">
                            <ul>
                                <li>
                                    <input type="radio" name="color" v-model="color" value="绿色">绿色
                                </li>
                            </ul>
                        </div>
                        <div class="product_color product_size" style="width: 50px;">
                            <ul>
                                <li>
                                    <input type="radio" name="color" v-model="color" value="黑色">黑色
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="customer_service">
                        <span>尺码：</span>
                        <div class="product_size">
                            <ul>
                                <li>
                                    <input type="radio" name="sizeList" v-model="size" value="1">S

                                </li>
                            </ul>
                        </div>
                        <div class="product_size">
                            <ul>
                                <li>
                                    <input type="radio" name="sizeList" v-model="size" value="2">M
                                </li>
                            </ul>
                        </div>
                        <div class="product_size">
                            <ul>
                                <li>
                                    <input type="radio" name="sizeList" v-model="size" value="3">L
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="customer_service">
                        <span>数量：</span>
                        <div class="product_number">
                            <div class="number_r">
                                <p @click="addNumber()">+</p>
                            </div>
                            <div class="number_m">
                                <input type="text" name="" v-model="number" value="1">
                            </div>
                            <div class="number_i">
                                <p @click="deleteNumber()">-</p>
                            </div>
                        </div>
                        <span>库存1500件</span>
                    </div>
                    <div class="buy_cart">
                        <div class="buy_now">
                            <a href="" class="buy_now_a">
                                <p>立即购买</p>
                            </a>
                        </div>
                        <div class="in_cart">
                            <a @click="addShopCar()" class="in_cart_a">
                                <p>加入购物车</p>
                            </a>
                        </div>
                    </div>
                    <div class="customer_service">
                        <span>服务承诺：</span>
                        <div class="fw_i">
                            <ul>
                                <li class="fw_icon">
                                    <i class="iconfont icon-tui"></i><span>退货补运费</span>
                                    <i class="iconfont icon-baoyou"></i><span>全国包邮</span>
                                    <i class="iconfont icon-7tianwuliyoutuihuo"></i><span>7天无理由退货</span>
                                    <i class="iconfont icon-24xiaoshifahuo"></i><span>24小时发货</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <div class="main-right">
                <h3>商家信息</h3>
                <ul class="main-right-ul-1">
                    <li><label>店铺：</label><span>{{shop.shopname}}</span></li>
                    <li><label>等级：</label><span></span></li>
                    <li><label>客服：</label>
                        <div><a href=""></a></div>
                    </li>
                    <li><label>所在地：</label><span>广州省广州市</span></li>
                    <li><label>商品数：</label>793</li>
                    <li><label>销售量：</label>182498</li>
                    <li><label>创建时间：</label>2013年12月11日</li>
                    <li class="main-right-li"><i></i>店铺保证金：<span>30000</span>元</li>
                </ul>
                <ul class="main-right-ul-2">
                    <li>描述<span>4.69</span></li>
                    <li>质量<span>4.70</span></li>
                    <li>价钱<span>4.70</span></li>
                    <li>服务<span>4.70</span></li>
                </ul>
                <div class="main-right-1">
                    <a href="" class="main-right-a-1">进入商店</a>
                    <a href="" class="main-right-a-2">收藏店铺</a>
                </div>
            </div>
        </div>
        <!--产品展示 列表详情-->
        <div class="home">
            <dl>
                <dt>相关推荐</dt>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/show1.jpg"></a>
                    <a class="home-a-2" href="">韩系经典条纹衫T恤</a>
                    <p>
                        <span class="h1">￥29.10</span>
                        <s>￥42.79</s>
                        <span class="h2">6.8折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/show2.jpg"></a>
                    <a class="home-a-2" href="">甜美气质一字领短款雪纺衫</a>
                    <p>
                        <span class="h1">￥37.05</span>
                        <s>￥57.00</s>
                        <span class="h2">6.5折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">新款弹力显瘦高腰外穿打底裤</a>
                    <p>
                        <span class="h1">￥29.00</span>
                        <s>￥50.00</s>
                        <span class="h2">5.8折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">稀包新款韩版简约复古定型包百搭</a>
                    <p>
                        <span class="h1">￥49.29</span>
                        <s>￥98.58</s>
                        <span class="h2">5.0折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">酸甜开胃蜜饯零食半梅200g*3袋</a>
                    <p>
                        <span class="h1">￥22.26</span>
                        <s>￥42.81</s>
                        <span class="h2">5.2折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">【特软小白鞋】学院风舒适皮面平</a>
                    <p>
                        <span class="h1">￥46.41</span>
                        <s>￥71.40</s>
                        <span class="h2">6.5折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">夏季新款日系少女学生舒适薄款</a>
                    <p>
                        <span class="h1">￥23.97</span>
                        <s>￥42.80</s>
                        <span class="h2">5.6折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">【买一送一@送同款！！！】新品</a>
                    <p>
                        <span class="h1">￥51.00</span>
                        <s>￥85.00</s>
                        <span class="h2">6.0折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">韩国款流苏厚底松糕学院风魔</a>
                    <p>
                        <span class="h1">￥51.00</span>
                        <s>￥85.00</s>
                        <span class="h2">6.0折</span>
                    </p>
                </dd>
                <dd class="home-dd-1">
                    <a class="home-a-1" href=""><img src="img/zhanshi2.jpg"></a>
                    <a class="home-a-2" href="">(有赠品)宿舍神奇大容量电煮锅</a>
                    <p>
                        <span class="h1">￥29.00</span>
                        <s>￥50.00</s>
                        <span class="h2">5.8折</span>
                    </p>
                </dd>
            </dl>
            <!-- 优品团商品信息 -->
            <div class="box">
                <!--广告位  &  商品详情-->
                <div class="detail-main">
                    <div class="main-nav-wrap">
                        <div class="main-nav">
                            <!--tab切换鍵-->
                            <ul class="list  clearfix">
                                <li class="c">
                                    <a href="#cc" id="and">
                                        <p>商品详情</p>
                                        <img class="arrow" src="img/arrow.png" alt="">
                                    </a>
                                </li>
                                <li class="d">
                                    <a href="#five" id="end">买家评价 1045</a>
                                </li>
                            </ul>
                        </div>
                        <!--商品展示点击事件-->
                        <div class="home-center">
                            <a href="#one">尺码材质</a><b>|</b>
                            <a href="#two">穿着效果</a><b>|</b>
                            <a href="#four">细节做工</a><b>|</b>
                        </div>
                        <div id="one"></div>
                        <!--c尺码材质-->
                        <div class="home-center-one">
                            <h1>尺码材质 size</h1>
                            <div class="home-center-one-2">
                                <div class="home-center-1">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td>袖型：常规袖</td>
                                            <td>风格：韩系,学院</td>
                                            <td>版型：宽松</td>
                                        </tr>
                                        <tr>
                                            <td>材质：棉</td>
                                            <td>颜色：{{commodity.color.colorname}}</td>
                                            <td>衣长：常规款（51-65cm）</td>
                                        </tr>
                                        <tr>
                                            <td>领型：圆领</td>
                                            <td>图案：字母</td>
                                            <td>季节：夏季</td>
                                        </tr>
                                        <tr>
                                            <td>袖长：短袖</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="home-center-2">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td>尺码</td>
                                            <td>肩宽</td>
                                            <td>衣长</td>
                                            <td>胸围</td>
                                            <td>袖长</td>
                                        </tr>
                                        <tr>
                                            <td>{{commodity.size.sizename}}</td>
                                            <td>47</td>
                                            <td>65</td>
                                            <td>98</td>
                                            <td>21</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="two"></div>
                        <!--穿着效果-->
                        <div class="home-center-two">
                            <h1>穿着效果 show</h1>
                            <div class="home-center-3">
                                <div class="home-center-4">
                                    <p></p>
                                    <p>这款T恤一定要入！搭配衣服真的很好看！ 面料是类似竹节棉的 很舒服！ 怎么都不会变形起球什么的！ 这款图案很有意思 你们自己体会吧哈哈！！！ 真心是很洋气
                                        很特别的一件哦！！！！</p>
                                    <p></p></div>
                            </div>
                        </div>
                        <!--模特展示-->
                        <div class="home-center-three">
                            <div class="home-center-three-1">
                                <img v-for="detail in commodity.commdetails" :src="detail.detailpic">

                            </div>
                        </div>
                        <div id="four"></div>
                        <!--做工展示-->
                        <div class="home-center-four">
                            <h1>细致做工 detail</h1>
                            <div class="home-center-four-1">
                                <img src="img/show16.jpg">
                                <img src="img/show17.jpg">
                            </div>
                        </div>
                        <div id="five"></div>
                        <!--买家评价-->
                        <div class="home-center-five">
                            <h2 class="home-h2">买家评价</h2>
                            <div class="home-center-five-1">
                                <ul>
                                    <li class="score">
                                        <div>
                                            <span class="score-1"><b style="width: 77px"></b></span>
                                            <span class="num"><b class="num-v">4.7</b><span
                                                    class="num-s">分</span></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="f3">描述符合:</span>
                                        <span class="score-1"><b style="width: 77px"></b></span>
                                        <span class="f2">4.8</span>
                                    </li>
                                    <li><span class="f3">价格合理:</span>
                                        <span class="score-1"><b style="width: 77px"></b></span>
                                        <span class="f2">4.76</span>
                                    </li>
                                    <li><span class="f3">商品质量:</span>
                                        <span class="score-1"><b style="width: 77px"></b></span>
                                        <span class="f2">4.72</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="home-center-five-2">
                                <div class="five">
                                    <div class="five-1">
                                        <a href="">全部评价（1050）</a>
                                        <b>|</b>
                                        <a>晒图（309）</a>
                                        <b>|</b>
                                        <a href="" class="hong">款式好（326）</a>
                                        <b>|</b>
                                        <a href="" class="hong">质量很好（149）</a>
                                        <b>|</b>
                                        <a href="" class="hong">料子很不错 （145） </a>
                                        <b>|</b>
                                        <a href="" class="hong">性价比高 (74) </a>
                                        <b>|</b>
                                        <a href="" class="hong">尺寸无偏差 (62) </a>
                                        <b>|</b>
                                        <a href="" class="hong"> 物流快（49）</a>
                                        <b>|</b>
                                        <a href="" class="hong">整体感觉不错（45）</a>
                                        <b>|</b>
                                        <a href="" class="hong">卖家服务很好（39）</a>
                                        <b>|</b>
                                        <a href="" class="hong">和描述的一样 (22) </a>
                                        <b>|</b>
                                        <a> 尺码不准 (65) </a>
                                        <b>|</b>
                                        <a>质量一般 (13) </a>
                                        <b>|</b>
                                        <a>有点薄 (11) </a>
                                        <b>|</b>
                                    </div>
                                    <div class="five-2">
                                        全部
                                        <b></b>
                                    </div>
                                </div>
                                <div class="six">
                                    <div class="six-1" v-for="commonList in common">
                                        <div class="six-2">
                                            <div class="six-w">
                                                <div class="six-y">
                                                    <span class="name">{{commonList.user.account}}</span>
                                                    <span class="date">2016年07月11日</span>
                                                </div>
                                                <div class="six-z">{{commonList.content}}</div>
                                                <div class="six-a">
                                                    <span>颜色:白色</span>
                                                    <span>尺码:均码</span>
                                                </div>
                                                <div class="six-b">
                                                    <ul>
                                                        <li class="six-li two">
                                                            <div class="img-x">
                                                                <span><img src="img/yong_2.jpg"></span></div>
                                                        </li>
                                                    </ul>
                                                    <div class="both"></div>
                                                    <div class="six-b-1 two-1">
                                                        <div class="img-y">
                                                            <span><img src="img/hu_2.jpg"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="six-3">
                                            <img src="img/touxiang.jpg">
                                        </div>
                                        <div class="both"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页尾-->
    <footer>
        <div class="footer-one">
            <div class="footer-two">
                <a class="logo" href=""></a>
                <div class="footer-1">
                    <p>营业执照注册号:<a href="">330106000129004</a></p>
                    <p>增值电信业务经营许可证:<a href="">浙B2-20110349
                    </a></p>
                    <p><a href=""><img src="img/anquan.png">
                        <span>浙公网安备 33010602002329号</span>
                    </a></p>
                    <p>©2016 Mogujie.com杭州卷瓜网络有限公司</p>
                </div>
                <div class="footer-2">
                    <dl>
                        <dt>公司</dt>
                        <dd><a>关于我们</a></dd>
                        <dd><a>招聘信息</a></dd>
                        <dd><a>联系我们</a></dd>
                    </dl>
                    <dl>
                        <dt>消费者</dt>
                        <dd><a>消费者服务</a></dd>
                        <dd><a>意见反馈</a></dd>
                        <dd><a>手机版下载</a></dd>
                    </dl>
                    <dl>
                        <dt>商家</dt>
                        <dd><a>商家入驻</a></dd>
                        <dd><a>商家后台</a></dd>
                        <dd><a>蘑菇商学院</a></dd>
                        <dd><a>商家社区</a></dd>
                    </dl>
                    <dl class="footer-3">
                        <dt>权威认证</dt>
                        <dd>
                            <a class="dt-1" href=""></a>
                            <a class="dt-2" href=""></a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </footer>
    <!--右边窗口-->
    <div id="flex">
        <div class="flex-one"></div>
        <div class="flex-two"></div>
        <!--购物车-->
        <div class="flex-three">
            <a href="" id="flex-3">
                <i></i>
                <div>购物车</div>
                <div class="flex-num"></div>
            </a>
        </div>
        <!--优惠卷-->
        <div class="flex-three">
            <a href="">
                <i class="flex-i"></i>
                <div>优惠卷</div>
                <div class="flex-num"></div>
            </a>
        </div>
        <!--钱包-->
        <div class="flex-three">
            <a href="">
                <i class="flex-n"></i>
                <div>钱包</div>
                <div class="flex-num"></div>
            </a>
        </div>
        <!--足迹-->
        <div class="flex-three">
            <a href="">
                <i class="flex-z"></i>
                <div>足迹</div>
                <div class="flex-num"></div>
            </a>
        </div>
        <!--<!TOP图标->-->
        <div class="flex-four">
            <div class="flex-four-1">
                <a href="">
                    <i class="flex-z"></i>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>

<script>
    // sendCode
    var vm = new Vue({
        el: "#wrapper",
        data: {
            commodity: {},
            headpicid: sessionStorage.getItem("headpicid"),
            shop: {},
            account: sessionStorage.getItem("realname"),
            size: 0,
            common: {},
            number: 1,
            color: ""
        },
        methods: {
            selectCommodityAndDetail: function () {
                axios.get("http://localhost/comodity/manager/selectCommodityAndDetail", {
                    params: {
                        id: this.headpicid
                    }
                }).then(res => {
                        this.commodity = res.data;
                        console.log(this.commodity)
                    }
                )
            },
            selectShopComId: function () {
                axios.get("http://localhost/selectShopComId", {
                    params: {
                        id: this.headpicid
                    }
                }).then(res => {
                        this.shop = res.data;
                        console.log(this.shop)
                    }
                )
            },
            selectCommon: function () {
                axios.get("http://localhost/common/manager/selectCommon", {
                    params: {
                        id: this.headpicid
                    }
                }).then(res => {
                        this.common = res.data;
                        console.log(this.common)
                    }
                )
            },
            addNumber: function () {
                this.number = this.number + 1;
                alert(this.number)
            },
            deleteNumber: function () {
                this.number = this.number - 1;
                alert(this.number)
            },
            addShopCar: function () {
                console.log(this.size)
                console.log(this.number)
                console.log(this.headpicid)
                console.log(this.color)
                console.log(this.number * this.commodity.price * 0.9)
                axios.post("http://localhost/shoppingcar/manager/addShopCar", {
                    cidshopp: this.headpicid,
                    color: this.color,
                    size: this.size,
                    count: this.number,
                    price: this.number * this.commodity.price * 0.9,
                    status: 1,
                }).then(res => {
                       if (res.data.result=="SUCCESS"){
                           alert("加入购物车成功")
                       }
                    }
                )
            }
        },
        mounted() {
            this.headpicid = sessionStorage.getItem("headpicid")
            this.selectCommodityAndDetail()
            this.selectShopComId()
            this.account = sessionStorage.getItem("realname")
            this.selectCommon()
        }
    })
</script>